<template>
  <!-- 产品详情 -->
  <div class="detailPc" v-if="detail.id" :key="detail.id">
    <img class="banner" :src="banner?.[0]?.webimages" />
    <div class="detail-box">
      <div class="header">
        <div class="left">
          <goods-swiper
            :mainImgUrl="detail?.carimages?.[0]"
            :imgUrlList="detail?.carimages"
            :file="detail?.videofile"
          >
          </goods-swiper>
        </div>
        <div class="right">
          <div class="title">{{ detail.name }}</div>
          <div class="box">
            <div class="list">
              <div class="item" v-if="detail.spec">
                <div class="text">规&emsp;&emsp;格：</div>
                <div class="value">{{ detail.spec }}</div>
              </div>
              <div class="item" v-if="detail.element">
                <div class="text">成&emsp;&emsp;分：</div>
                <div class="value">
                  {{ detail.element }}
                </div>
              </div>
              <div class="item" v-if="detail.indication">
                <div class="text">功能主治：</div>
                <div class="value">
                  {{ detail.indication }}
                </div>
              </div>
              <div class="item" v-if="detail.dosage">
                <div class="text">用法用量：</div>
                <div class="value">
                  {{ detail.dosage }}
                </div>
              </div>

              <div class="item" v-if="detail.approval_number">
                <div class="text">批准文号：</div>
                <div class="value">{{ detail.approval_number }}</div>
              </div>
              <div class="item" v-if="detail?.manufacturer">
                <div class="text">生产企业：</div>
                <div class="value">{{ detail?.manufacturer }}</div>
              </div>
            </div>
          </div>
          <a
            v-if="detail?.buy_linkurl"
            target="_blank"
            :href="detail?.buy_linkurl"
            class="buy"
            >立即购买</a
          >
        </div>
      </div>
      <div class="content" v-if="list.length > 0">
        <div class="menu-box">
          <div class="title">
            <div class="name">产品详情</div>
            <div class="en">PRODUCT DETAILS</div>
          </div>
          <tabs class="tabs" :list="list" @change="tabsChange"></tabs>
        </div>
        <div class="box">
          <!-- 产品说明说书 -->
          <div
            class="description"
            v-if="type == '产品说明书' && detail.description"
          >
            <div v-html="detail.description"></div>
          </div>
          <!-- 产品优势 -->
          <div class="advantage" v-if="type == '产品优势' && detail.advantage">
            <div v-html="detail.advantage"></div>
          </div>
          <!-- 产品荣誉 -->
          <honor
            :list="honor.list"
            v-if="type == '产品荣誉' && honor?.list?.length > 0"
            :timeList="honor.timeList"
            @change="honorChange"
          />
          <!-- 实验发现 -->
          <experiment
            :list="experiment"
            v-if="type == '实验发现' && experiment?.length > 0"
          />
          <!-- 相关报道 -->
          <experiment
            :list="report"
            v-if="type == '相关报道' && report?.length > 0"
          />
        </div>
      </div>
      <!-- 同类其他产品 -->
      <bottom :list="sameGoods" v-if="sameGoods.length > 0" />
    </div>
  </div>

  <!-- 移动端 -->
  <div class="detailM" v-if="$utils.getPc() == 2">
    <div class="detail-box">
      <div class="header">
        <img class="bg" src="../../../assets/image/product/m-video-bg.png" />
        <div class="banner-frame">
          <!-- 使用新版swiper -->
          <swiper
            loop
            class="swiper-container"
            :pagination="{
              el: '.swiper-pagination',
              clickable: true,
              type: 'progressbar',
            }"
            v-if="detail.carimages?.length"
          >
            <swiper-slide
              class="swiper-slide"
              v-for="(item, index) in detail.carimages"
              :key="item"
            >
              <img
                :src="item"
                class="i"
                v-if="!(detail.videofile && index == 0)"
              />
              <video
                class="i"
                v-if="detail?.videofile && index == 0"
                :poster="item"
                controls
              >
                <source :src="detail?.videofile" type="video/mp4" />
              </video>
            </swiper-slide>

            <template #container-start>
              <div class="swiper-pagination"></div>
            </template>
          </swiper>

          <div class="title-box">
            <div class="title">{{ detail?.name }}</div>
            <!-- <div class="buy" @click="buy">立即购买</div> -->
            <a
              v-if="detail?.buy_linkurl"
              target="_blank"
              :href="detail?.buy_linkurl"
              class="buy"
              >立即购买</a
            >
          </div>
          <div class="text">{{ detail?.indication }}</div>
        </div>
      </div>
      <div class="content">
        <!-- 产品说明书 -->
        <div class="instructions" v-if="detail?.descriptionmobile">
          <div class="angle" v-if="descriptionStatus == 1">产品说明书</div>
          <div class="angle-r" v-else>产品说明书</div>
          <div class="frame-box">
            <app-richtext
              class="frame"
              :value="detail?.descriptionmobile"
            ></app-richtext>
            <!-- <div class="frame">
              
              <div v-html="detail?.descriptionmobile"></div>
            </div> -->
          </div>
        </div>

        <!-- 产品优势-->
        <div class="advantage" v-if="detail?.advantagemobile">
          <div class="angle" v-if="advantageStatus == 1">产品优势</div>
          <div class="angle-r" v-else>产品优势</div>
          <div class="frame-box">
            <app-richtext
              class="frame"
              :value="detail?.advantagemobile"
            ></app-richtext>
            <!-- <div class="frame">
              <div v-html="detail?.advantagemobile"></div>
            </div> -->
          </div>
        </div>

        <!-- 产品荣誉 -->
        <honor
          v-if="honor?.list?.length > 0"
          :list="honor.list"
          :timeList="honor.timeList"
          @change="honorChange"
          :honorStatus="honorStatus"
        />
        <!-- 实验发现 -->
        <experiment
          :list="experiment"
          :type="1"
          v-if="experiment.length > 0"
          :status="experimentStatus"
        />
        <!-- 相关报道 -->
        <experiment
          :list="report"
          :type="2"
          v-if="report.length > 0"
          :status="newsStatus"
        />
      </div>
      <!-- 同类其他产品 -->
      <bottom :list="sameGoods" v-if="sameGoods.length > 0" />
    </div>
  </div>
</template>

<script>
import goodsSwiper from "../../../components/goodsSwiper.vue";
import tabs from "./tabs.vue";
import honor from "./honor.vue";
import experiment from "./experiment.vue";
import bottom from "./bottom.vue";
import { mapState } from "vuex";

export default {
  components: { goodsSwiper, tabs, honor, experiment, bottom },
  computed: {
    ...mapState("common", ["webInfo"]),
  },
  data() {
    return {
      detail: {},
      list: ["产品说明书", "产品优势", "产品荣誉", "实验发现", "相关报道"],
      honor: {
        list: [],
        year: "-1",
        timeList: [],
      },
      experiment: [],
      report: [],
      sameGoods: [],
      type: "产品说明书",
      banner: [],
      listMobile: [],
      descriptionStatus: 1,
      honorStatus: 1,
      advantageStatus: 1,
      experimentStatus: 1,
      newsStatus: 1,
    };
  },
  async beforeRouteUpdate(to) {
    // this.detail = {};
    // this.honor = {
    //   list: [],
    //   year: "",
    // };
    // this.sameGoods = [];
    // this.type = 0;
    // this.$data = this.$options.data;
    // Object.assign(this.$data, this.$options.data);
    this.init(to.query.id);
  },

  async mounted() {
    // 初始化数据
    await this.init();
    await this.getBanner();
  },
  methods: {
    async getBanner() {
      try {
        let id;
        //菜单Id写死 根据ID 获取不同的轮播
        // if (this.$route.query.index == 0) {
        //   id = 6;
        // } else {
        //   id = 7;
        // }
        // 设置站点名称
        const webname = this.webInfo?.webname || "";

        if (this.detail.pid == 28) {
          id = 6;

          // 拼接标题
          document.title = `${webname}_成人药`;
        } else if (this.detail.pid == 29) {
          id = 7;

          // 拼接标题
          document.title = `${webname}_儿童药`;
        }
        const result = await this.$request.get("khcommon/banner", {
          params: {
            navId: id,
          },
        });
        this.banner = result.data;
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },

    /**
     * 初始化数据
     */
    async init(id = this.$route.query.id) {
      // 获取数据
      const [detail, sameGoods] = await Promise.all([
        this.$request.get("Productcenter/productDetail", {
          params: {
            id,
          },
        }),
        this.$request.get("Productcenter/productSimilar", {
          params: {
            product_id: id,
          },
        }),
        // this.honorChange("", id),
        await this.getTimeData(id),
        await this.getExperiment(id),
        await this.getReport(id),
      ]);
      if (detail.data?.carimages.length > 0) {
        //添加主图
        if (detail.data?.images) {
          detail.data?.carimages?.unshift(detail.data?.images);
        }
        //添加海报图
        if (detail.data?.webimage) {
          detail.data?.carimages?.unshift(detail.data?.webimage);
        }

        //判断视频文件和封面是否存在
        if (detail.data.videofile && detail.data.videoimages) {
          //将视频封面添加到轮播
          detail.data?.carimages?.unshift(detail.data.videoimages);
        } else {
          //"" 不显示视频
          detail.data.videofile = "";
        }
      } else {
        //判断视频文件和封面是否存在
        if (detail.data.videofile && detail.data.videoimages) {
          //将视频封面添加到轮播
          detail.data?.carimages?.push(detail.data.videoimages);
        }
        //添加海报图
        if (detail.data?.webimage) {
          detail.data?.carimages?.push(detail.data?.webimage);
        }
        //添加主图
        if (detail.data?.images) {
          detail.data?.carimages?.push(detail.data?.images);
        }
      }

      // 设置数据
      this.detail = detail.data;

      //如果为空则不显示该说明书标签
      if (this.$utils.getPc == 1) {
        if (!this.detail?.description) {
          let list = [];
          this.list.forEach((item) => {
            if (item != "产品说明书") {
              list.push(item);
            }
          });
          this.list = list;
        }
      } else {
        if (!this.detail?.descriptionmobile) {
          let list = [];
          this.list.forEach((item) => {
            if (item != "产品说明书") {
              list.push(item);
            }
          });
          this.list = list;
        }
      }

      //如果为空则不显示该优势标签
      if (this.$utils.getPc == 1) {
        if (!this.detail?.advantage) {
          let list = [];
          this.list.forEach((item) => {
            if (item != "产品优势") {
              list.push(item);
            }
          });
          this.list = list;
        }
      } else {
        if (!this.detail?.advantagemobile) {
          let list = [];
          this.list.forEach((item) => {
            if (item != "产品优势") {
              list.push(item);
            }
          });
          this.list = list;
        }
      }

      this.sameGoods = sameGoods.data;

      //移动端 一左一右
      this.list.forEach((item, index) => {
        //默认第一个左
        if (index == 0) {
          //status 1左 2右
          this.listMobile.push({ name: item, status: 1 });
        } else {
          //根据前一个数据判断当前
          if (this.listMobile[index - 1].status == 1) {
            this.listMobile.push({ name: item, status: 2 });
          } else {
            this.listMobile.push({ name: item, status: 1 });
          }
        }
      });

      this.listMobile.forEach((item) => {
        switch (item.name) {
          case "产品说明书":
            this.descriptionStatus = item.status;

            break;
          case "产品荣誉":
            this.honorStatus = item.status;

            break;
          case "产品优势":
            this.advantageStatus = item.status;
            break;
          case "实验发现":
            this.experimentStatus = item.status;
            break;
          case "相关报道":
            this.newsStatus = item.status;

            break;
        }
      });
    },

    /**
     * 获取对应的标签status 1左 2右
     */
    getMobileStatus(name) {
      this.listMobile.forEach((item) => {
        if (item.name == name) {
          return item.status;
        }
      });
    },

    /**
     * 获取时间线数据
     */
    async getTimeData(id) {
      try {
        //获取时间线数据
        const time = await this.$request.get("/khcommon/timeLine", {
          params: {
            cid: 65,
            product_id: id,
          },
        });
        this.honor.timeList = time.data;
        this.honor.year = this.honor?.timeList?.[0]?.year;
        await this.honorChange(this.honor.year, id);
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },

    /**
     * 产品荣誉
     */
    async honorChange(year = "-1", id = this.$route.query.id) {
      const honor = await this.$request.get("Productcenter/productInline", {
        params: {
          cid: 65,
          year: year,
          product_id: id,
        },
      });
      this.honor.list = honor.data;

      if (this.honor.list.length == 0) {
        let list = [];
        this.list.forEach((item) => {
          if (item != "产品荣誉") {
            list.push(item);
          }
        });

        this.list = list;
      }
    },

    /**
     * 实验发现
     */
    async getExperiment(id = this.$route.query.id) {
      const experiment = await this.$request.get(
        "Productcenter/productInline",
        {
          params: {
            cid: 66,
            product_id: id,
          },
        }
      );
      this.experiment = experiment.data;

      if (this.experiment.length == 0) {
        let list = [];
        this.list.forEach((item) => {
          if (item != "实验发现") {
            list.push(item);
          }
        });
        this.list = list;
      }
    },
    /**
     * 相关报道
     */
    async getReport(id = this.$route.query.id) {
      const report = await this.$request.get("Productcenter/productInline", {
        params: {
          cid: 117,
          product_id: id,
        },
      });
      this.report = report.data;

      if (this.report.length == 0) {
        let list = [];
        this.list.forEach((item) => {
          if (item != "相关报道") {
            list.push(item);
          }
        });
        this.list = list;
      }
    },
    /**
     * tabs点击事件
     */
    async tabsChange(index) {
      this.type = this.list[index];
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .detailM {
    display: none;
  }

  .detailPc {
    @include fn.fluidContainer;
    display: flex;
    flex-direction: column;
    align-items: center;

    .banner {
      width: 100%;
      height: 375px;
      object-fit: cover;
    }

    .detail-box {
      @include fn.container;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 40px;

      .content {
        @include fn.container;
        display: flex;
        flex-direction: column;
        margin-top: 70px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;

        .box {
          box-sizing: border-box;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          padding: 34px;

          background: #fff;
          border-radius: 0 12px 12px 12px;
          box-shadow: 0px 6px 38px 0px rgba(254, 221, 188, 0.16);

          .description {
            width: 100%;
            overflow: hidden;
            word-break: break-all;
          }
          .advantage {
            width: 100%;
            overflow: hidden;
            word-break: break-all;
          }
        }

        .menu-box {
          display: flex;
          position: relative;
          background-image: url("~@/assets/image/product/angle.png");
          background-repeat: no-repeat;
          background-position-x: 0;
          background-position-y: 0;
          height: 75px;

          .tabs {
            position: absolute;
            right: 0;
            top: 24px;
          }

          .title {
            position: relative;
            z-index: 10;
            padding-top: 18px;
            margin-left: 34px;

            .name {
              font-weight: bold;
              font-size: 26px;
              color: #939393;
            }

            .en {
              font-size: 16px;

              font-weight: 400;
              color: #bfbfbf;
            }
          }
        }
      }

      .header {
        @include fn.container;
        margin-top: 62px;
        width: 100%;
        display: flex;
        justify-content: space-between;

        .left {
          width: 460px;
        }

        .right {
          width: 645px;
          position: relative;

          .buy {
            position: absolute;
            bottom: 0;
            display: block;
            right: 10px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;

            width: 138px;
            height: 40px;
            background: #ee7800;
            border-radius: 20px;
            color: #fff;

            &:active {
              background: rgba(210, 217, 236, 0.878);
            }
          }

          .title {
            font-size: 26px;
            font-weight: bold;
            color: #333333;
          }

          .box {
            margin-top: 24px;
            height: 240px;
            padding-right: 20px;
            overflow-y: auto;
            overflow-x: hidden;

            .item {
              margin-bottom: 20px;
              display: flex;

              .text {
                width: 80px;
                font-size: 14px;
                color: #666666;
              }

              .value {
                flex: 1 0;
                font-size: 14px;
                color: #999999;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .detailPc {
    display: none;
  }

  .detailM {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f8f8;

    .detail-box {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 40px;

      .content {
        width: fn.rpx(700);
        display: flex;
        flex-direction: column;
        margin-top: fn.rpx(50);

        .honor {
          margin-top: fn.rpx(40);
          width: 100%;
          display: flex;
          position: relative;
          flex-direction: column;
          position: relative;

          .angle {
            margin-left: fn.rpx(408);
            width: fn.rpx(292);
            height: fn.rpx(75);
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url(../../../assets/image/product/right-bg.png);
            font-size: fn.rpx(26);

            font-weight: 400;
            color: #939393;
            display: flex;
            box-sizing: border-box;
            padding-left: fn.rpx(140);
            align-items: center;
          }

          .frame-box {
            overflow: hidden;
            box-sizing: border-box;
            padding: fn.rpx(25) fn.rpx(20) fn.rpx(25) fn.rpx(25);
            background: #fff;
            border-radius: 0 fn.rpx(12) fn.rpx(12) fn.rpx(12);

            .frame {
              word-break: break-all;
              padding-right: 0 fn.rpx(5);
              display: flex;
              flex-direction: column;
              align-items: center;
              height: fn.rpx(544);
            }
          }
        }

        .instructions {
          width: 100%;
          display: flex;
          position: relative;
          flex-direction: column;
          position: relative;
          overflow: hidden;

          .angle {
            width: fn.rpx(292);
            height: fn.rpx(75);
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url(../../../assets/image/product/left-bg.png);
            font-size: fn.rpx(26);

            font-weight: 400;
            color: #939393;
            display: flex;
            box-sizing: border-box;
            padding-left: fn.rpx(40);
            align-items: center;
          }

          .angle-r {
            margin-left: fn.rpx(408);
            width: fn.rpx(292);
            height: fn.rpx(75);
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url(../../../assets/image/product/right-bg.png);
            font-size: fn.rpx(26);

            font-weight: 400;
            color: #939393;
            display: flex;

            box-sizing: border-box;
            padding-left: fn.rpx(110);
            align-items: center;
          }

          .frame-box {
            box-sizing: border-box;
            padding: fn.rpx(25) fn.rpx(20) fn.rpx(25) fn.rpx(25);
            background: #fff;
            border-radius: 0 fn.rpx(12) fn.rpx(12) fn.rpx(12);

            .frame {
              // @include fn.scroll;
              // overflow-y: auto;
              // overflow-x: hidden;
              padding-right: fn.rpx(5);
              box-sizing: border-box;

              word-break: break-all;
              width: 100%;
              // display: flex;
              // flex-direction: column;
              // align-items: center;
              height: fn.rpx(544);
            }
          }
        }

        .advantage {
          margin-top: fn.rpx(40);
          width: 100%;
          display: flex;
          position: relative;
          flex-direction: column;
          overflow: hidden;

          .angle {
            width: fn.rpx(292);
            height: fn.rpx(75);
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url(../../../assets/image/product/left-bg.png);
            font-size: fn.rpx(26);

            font-weight: 400;
            color: #939393;
            display: flex;
            box-sizing: border-box;
            padding-left: fn.rpx(40);
            align-items: center;
          }

          .angle-r {
            margin-left: fn.rpx(408);
            width: fn.rpx(292);
            height: fn.rpx(75);
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url(../../../assets/image/product/right-bg.png);
            font-size: fn.rpx(26);

            font-weight: 400;
            color: #939393;
            display: flex;

            box-sizing: border-box;
            padding-left: fn.rpx(110);
            align-items: center;
          }

          .frame-box {
            box-sizing: border-box;
            padding: fn.rpx(25) fn.rpx(20) fn.rpx(25) fn.rpx(25);
            background: #fff;
            border-radius: 0 fn.rpx(12) fn.rpx(12) fn.rpx(12);

            .frame {
              // @include fn.scroll;
              // overflow-y: auto;
              // overflow-x: hidden;
              padding-right: fn.rpx(5);
              display: flex;
              box-sizing: border-box;
              width: 100%;
              // flex-direction: column;
              // align-items: center;
              height: fn.rpx(544);
            }
          }
        }
      }

      .header {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .bg {
          margin-top: 12px;
          width: fn.rpx(709);
          height: fn.rpx(37);
        }

        .banner-frame {
          position: relative;
          top: fn.rpx(-10);
          width: fn.rpx(693);
          // height: fn.rpx(527);
          background: #ffffff;
          box-shadow: 0px fn.rpx(12) fn.rpx(35) 0px rgba(192, 98, 2, 0.15);
          border-radius: fn.rpx(6);
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-bottom: fn.rpx(10);

          .text {
            // @include fn.ellipsis(2);
            margin-top: fn.rpx(6);
            width: fn.rpx(630);
            font-size: fn.rpx(14);
            color: #999;
            line-height: fn.rpx(30);
          }

          .title-box {
            margin-top: fn.rpx(30);
            width: fn.rpx(630);
            display: flex;
            justify-content: space-between;

            .title {
              width: 100%;
              height: fn.rpx(30);
              font-size: fn.rpx(26);

              font-weight: bold;
              color: #333333;
            }

            .buy {
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: fn.rpx(17);
              width: fn.rpx(138);
              height: fn.rpx(40);
              background: color.$base;
              border-radius: 20px;
              color: #fff;

              &:active {
                background: rgba(210, 217, 236, 0.878);
              }
            }
          }

          .swiper-container {
            margin-top: fn.rpx(30);
            // width: fn.rpx(630);
            // height: fn.rpx(336);
            --swiper-pagination-color: #ee7800;
            @include fn.scale(fn.rpx(630));

            .swiper-pagination {
              width: 100% !important;
              z-index: 11 !important;
              position: absolute !important;
              left: 0 !important;
              top: initial !important;
              bottom: fn.rpx(0) !important;
            }

            .swiper-button-prev:after {
              display: none;
            }

            .swiper-button-next:after {
              display: none;
            }

            .swiper-wrapper {
              // width: fn.rpx(630);
              // height: fn.rpx(336);
              @include fn.scale(fn.rpx(630));
              .swiper-slide {
                height: 100%;
                width: 100%;
                cursor: pointer;

                display: flex;

                .i {
                  object-fit: cover;
                  // width: fn.rpx(630);
                  // height: fn.rpx(336); 354
                  @include fn.scale(fn.rpx(630));
                }
              }
            }
          }

          .banner-m {
            overflow: hidden;
            margin-top: fn.rpx(30);
            // width: fn.rpx(630);
            // height: fn.rpx(336);
            @include fn.scale(fn.rpx(630));

            .el-carousel-item {
              width: fn.rpx(630);
              height: fn.rpx(336);

              .i {
                object-fit: cover;
                width: fn.rpx(630);
                height: fn.rpx(336);
              }
            }
          }
        }
      }
    }
  }
}
</style>